<template>
  <view class="item u-flex">
    <view v-if="imgShow">
      <view v-if="index < 3" class="itemIndex">
        <image :src="`/static/icon/${index+1}.png`"></image>
      </view>
      <view v-else class="itemIndex">
        <view class="index">{{index+1}}</view>
      </view>
    </view>
    <view class="img">
      <view v-if="item.timg">
        <item-image :type="'1'"  :img="item.timg" :size="146"  :fade="false" />
      </view>
      <view v-if="item.image">
        <item-image :type="'1'"  :img="item.image" :size="146"  :fade="false" />
      </view>
    </view>
    <view class="cent">
      <view class="name u-flex flex_bt">
        <view>{{item.name}}</view>
        <view class="price">好评率：{{item.comment}}%</view>
      </view>
      <view class="u-flex flex_bt">
        <view class="num">
          <view>已服务：{{item.appnum}}单</view>
          <view>销售额：{{item.order_price}}</view>
        </view>
        <view v-if="type == 2" class="detail u-flex flex_j_c" @click="userDetail(item)">查看详情</view>
      </view>

    </view>

  </view>

</template>

<script>
export default {
  name: "list-item",
  data(){
    return{
      type:''
    }
  },
  props:{
    item: {
      type: Object,
      default: {}
    },
    index: {
      type: Number,
      default: 0
    },
    imgShow: {
      type: Boolean,
      default: true
    },
  },
  created(){
    this.type = uni.getStorageSync('type')
  },
  methods:{
    userDetail(data){
      this.$u.route({
        url:'/pagesA/StoreTechnician/detail',
        params: {
          id: data.id
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .item{
    min-height: 200rpx;
    width: 100%;
    background: white;
    margin-top: 20rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    .img{

      margin-right:30rpx;
      image{
        width: 146rpx;
        height: 146rpx;
        border-radius: 50%;
      }
    }
    .itemIndex{
      width: 56rpx;
      height: 56rpx;
      margin-right: 28rpx;
      image{
        width: 56rpx;
        height: 56rpx;
      }
      .index{
        width: 48rpx;
        height: 48rpx;
        background: #FFFFFF;
        border: 3rpx solid $uni-color-primary;
        border-radius: 50%;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $uni-color-primary;
        font-weight: 800;
      }
    }
    .cent{
      display: flex;
      height: 146rpx;
      width: 100%;
      justify-content: space-between;
      flex-direction:  column ;
      .name{
        font-size: 32rpx;
        font-weight: bold;
        color:$uni-text-color ;
      }

      .num{
        font-size: 24rpx;
        font-weight: 400;
        color:$uni-text-color-grey ;
      }
      .price{
        color: $uni-color-price;
        font-size: 28rpx;
        font-weight: 400;
      }
      .detail{
        margin-left: 10rpx;
        width: 130rpx;
        height: 62rpx;
        background: #45806E;
        text-align: center;
        color: white;
        font-size: 24rpx;
        border-radius: 8rpx;
        margin-top: 40rpx;
      }
    }
  }

</style>